<template>
     <a-modal
      title="新增"
      :width=800
      :maskClosable=false
      v-model="visible"
      @ok="handleOk"
    >

      <a-form :form="form">

        <a-form-item
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
          label="父资源id"
        >
          <a-input placeholder="父资源id"
              v-decorator="[
                'parentId',
                {initialValue: sysResource.parentId, rules: [{ required: true, message: '请输入父资源id' }]}
              ]"
           disabled="disabled" />
        </a-form-item>

          <a-form-item
            label="资源名"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'name',
                {initialValue: sysResource.name, rules: [{ required: true, message: '请输入资源名' }]}
              ]"
              placeholder="给资源起个名字" />
          </a-form-item>

          <a-form-item
            label="资源类型"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
          >
            <a-radio-group
                v-decorator="[
                'type',
                {initialValue: sysResource.type},
              ]"
            >
              <a-radio :value="1">菜单</a-radio>
              <a-radio :value="2">动作</a-radio>
            </a-radio-group>
          </a-form-item>

        <a-form-item
            label="授权标识"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'permission',
                {initialValue: sysResource.permission, rules: [{ required: true, message: '请输入授权标识' }]}
              ]"
              placeholder="如:sysResourceEdit" />
        </a-form-item> 

        <a-form-item
          label="序号"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
          :required="false"
        >
          <a-input-number :min="0" :max="10000" 
          v-decorator="[
                'orderNum',
                 {initialValue: sysResource.orderNum},                
          ]"
            />
        </a-form-item>  

      </a-form>


    </a-modal>

</template>
<script>
import {saveResource } from '@/api/sys'

export default {
  name: 'SysResourceModal',
  data() {
    return {
      visible: false,
      sysResource: {},
      defaultExpandAll: true,
      checkedKeys: [],
      form: this.$form.createForm(this),
      resourceTreeData: []
    }
  },
  methods: {
    handleEdit(record) {
      this.form.resetFields()
      console.log(record)
      this.sysResource = Object.assign({}, record)
      this.visible = true
    },
    handleCreate(selectedRows) {
      this.form.resetFields()
      var parentId = 0
      var type = 1
      if(selectedRows.length == 1){
        const resource = selectedRows[0]
        parentId = resource.id
        type = resource.type
      }
      if(type != 1){
        alert("父资源必须是菜单")
        return
      }
      this.sysResource = {
        type: 1,
        orderNum: 1,
        parentId: parentId,
        name: "",
        permission: ""
      }
      this.visible = true
    },
    handleOk () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const params = { ...values }
          params.id = this.sysResource.id
          params.resourceIds =  this.checkedKeys
          console.log(params)
          saveResource(params).then(res => {
            _this.$message.success('保存成功')
            _this.visible = false
            _this.$emit('ok')
          })
        }
      })
    }
  },
  created() {
  }
}


</script>
